<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn1">发送请求</button>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
// 在浏览器使用:基于Promise对ajax进行封装
// 在node.js使用:基于Promise对象http进行封装
// Axios是VUE官方推荐使用的http请求库

let btn1 = document.querySelector('.btn1')

// 发送请求
btn1.onclick = function (){
    console.log( '发送请求...' )

    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        // console.log( config )// {...}配置对象
        // 修改请求参数
        config.params.a = 8000
        config.params.b = 1000

        // 类似于 next() 放行/执行下一步
        return config // 以return的config来发送请求
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
    })

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么

        // 修改响应的数据
        response.data = {
            a: 5000,
            b: 200
        }

        // 类似于 next() 放行/执行下一步
        return response.data // 以return的response作为响应结果
    }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error)
    })

    axios.get('http://localhost:8080/users/data',{// config
        params: {
            a: 5000,
            b: 200
        }
    })
    .then((res)=>{
        console.log( res )
    })
    .catch((err)=>{
        console.log( err )
    })
    
}

</script>
</body>
</html>